<template>
  <div class="navigation">
    <div class="navigation-left">
      <img class="navigation-left-logo" src="@img/djlogo.png" />
      <div class="navigation-left-title">{{ STYLE_name }}</div>
      <div class="navigation-left-titleboream">{{ STYLE_name }}</div>
    </div>
    <div class="navigation-right">
      <div class="navigation-right-itema"></div>

      <!-- 头像栏模块 start -->
      <iconUserPom />
      <!-- 头像栏模块 end -->
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importComfig from './navigation';
import { IconUser } from '@arco-design/web-vue/es/icon';
import iconUserPom from '../iconUserPom/iconUserPom.vue';
export default {
  components: {
    IconUser,
    iconUserPom,
  },
  setup() {
    const { base, init } = importComfig();
    init();
    return {
      ...toRefs(base),
      init,
    };
  },
};
</script>

<style lang="less" scoped>
.navigation {
  display: flex;
  justify-content: space-between;
  height: 100%;
  &-left {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    &-logo {
      width: 30px;
    }
    &-title {
      font-size: 24px;
      font-weight: bold;
      color: black;
      margin-left: 10px;
    }
    &-titleboream {
      position: absolute;
      left: 42px;
      font-size: 24px;
      font-weight: bold;
      color: rgb(222, 85, 85);
      width: 300px;
    }
  }
  &-right {
    height: 100%;
    display: flex;
    &-itema {
      &-iconuserpl {
        cursor: pointer;
      }
    }
  }
}
</style>
